{% extends 'IcsocUIBundle::page.html.twig' %}
{% from 'IcsocUIBundle:Macro:actions.html.twig' import create %}
{% from 'IcsocUIBundle:Macro:formValidator.html.twig' import jqvalidator %}
{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}
{% block content %}
    <div class="page-content">
        <form class="form-horizontal" role="form" method="post" enctype="multipart/form-data" id="sound_form" >
            <!-- #section:elements.form -->
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-1">{{ 'Phonetic name'|trans }}</label>
                <div class="col-sm-7">
                    <input type="text" id="form-field-1" name="name" placeholder="{{ 'Phonetic name'|trans }}" class="col-xs-10 col-sm-5">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-1">{{ 'The voice file'|trans }}</label>
                <div class="col-sm-7">
                    <select class="col-xs-10 col-sm-5" id="form-field-select-1" onchange="switchSound(this)">
                        <option value="1">{{ 'The voice file'|trans }}</option>
                        {#<option value="2">Tts</option>#}
                        {#<option value="3">{{ 'Self recording'|trans }}</option>#}
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-1" id="sound_lable"></label>
                <div class="col-sm-3 col-xs-10" id="switch_content">

                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-1">{{ 'Voice type'|trans }}</label>
                <div class="col-sm-7">
                    <select class="col-xs-10 col-sm-5" id="form-field-select-1" name="sound_type">
                        {% for key,stype in soundType %}
                          <option value="{{ key }}">{{ stype }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-1">{{ 'remark'|trans }}</label>
                <div class="col-sm-7">
                    <textarea id="form-field-11" class="autosize-transition col-xs-10 col-sm-5" name="remark"
                              style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 56.666622328186px;"></textarea>
                </div>
            </div>
            {{ create(path('icsoc_sound_index')) }}
        </form>
    </div>
    <div id="tts" class="hidden">
        <textarea id="tts_content" class="autosize-transition form-control" style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 56.666622328186px;"></textarea>
    </div>
    <div id="customer_sound" class="hidden">
       <button>{{ 'Self recording'|trans }}</button>
    </div>
    <div id="normal_file" class="hidden">
        <input type="file" id="id-input-file-2" name="file_name"/>
    </div>
{% endblock %}
{% block footer %}
    {% javascripts
    '@jqvalidate_js'
    '@common_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script>
        function switchSound(obj)
        {
           var val = obj.value;
           var str = '';
            var $switch_content = $('#switch_content');
           switch (parseInt(val))
           {
               case 1:
                   var content = $('#normal_file').html().replace(/id-input-file-2/g, "id-input-file");
                   content = content.replace(/file_name/g, "sound");
                   $switch_content.html(content);
                   $('#id-input-file').ace_file_input({
                       no_file:'{{ "Please select wav or mp3 file"|trans }}',
                       btn_choose:'{{ "Choose"|trans }}',
                       btn_change:'{{ "Change"|trans }}',
                       droppable:false,
                       onchange:null,
                       thumbnail:false,
                       whitelist: 'wav|mp3'
                   });
                   break;
               case 2:
                   str = '{{ 'The content of the speech'|trans }}';
                   $switch_content.html($('#tts').html());
                   break;
               case 3:
                   $switch_content.html($('#customer_sound').html());
                   break;
           }
           $('#sound_lable').text(str);
        }
        $(document).ready(function(){
            switchSound({"value":1});
            $('#sound_form').validate({
                {{ jqvalidator() }}
                rules: {
                    name: "required",
                    sound_type: "required"
                },
                messages: {
                    name: '{{ 'Phonetic name must be filled in'|trans }}',
                    sound_type: '{{ 'Voice type must choose'|trans }}'
                }
            })
        })
    </script>
{% endblock %}